<template>
  <div class="orderList-page">
    <h3>订单列表</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'用户姓名'">
        <el-input v-model.trim="searchInfo.realname" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'申请时间'">
        <el-date-picker
          v-model="searchInfo.applyTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'订单状态'">
        <el-select v-model="searchInfo.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <SearchWarp :label="'放款时间'">
        <el-date-picker
          v-model="searchInfo.payTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'到期时间'">
        <el-date-picker
          v-model="searchInfo.lastRepayDay"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'结清时间'">
        <el-date-picker
          v-model="searchInfo.repayTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <SearchWarp :label="'待还款金额'">
        <el-input
          class="inputWidth"
          v-model.trim="searchInfo.leftRepayMoneyStart"
          maxlength="11"
          placeholder="起始金额"
        ></el-input>-
        <el-input
          class="inputWidth"
          v-model.trim="searchInfo.leftRepayMoneyEnd"
          maxlength="11"
          placeholder="结束金额"
        ></el-input>
      </SearchWarp>
      <SearchWarp :label="'有无逾期'">
        <el-select v-model="searchInfo.overdueTag" placeholder="请选择">
          <el-option
            v-for="item in overdueTagOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'">
      <el-button v-if="exportShow" type="primary" @click="exportData">导出</el-button>
    </AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false" v-loading="borrowlistLoading">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
      >
        <el-table-column prop="id" label="申请ID"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
        <el-table-column prop="applyDate" label="申请时间" min-width="150"></el-table-column>
        <el-table-column prop="capital" label="申请金额"></el-table-column>
        <el-table-column prop="realCapital" label="放款金额"></el-table-column>
        <el-table-column prop="payDate" label="放款时间" min-width="150"></el-table-column>
        <el-table-column
          prop="lastRepayDay"
          label="到期日"
          min-width="150"
          :formatter="formatter_time"
        ></el-table-column>
        <el-table-column prop="repayDate" label="结清时间" min-width="150"></el-table-column>
        <el-table-column prop="totalFee" label="息费合计"></el-table-column>
        <el-table-column prop="discount" label="减免金额"></el-table-column>
        <el-table-column prop="repaidMoney" label="已还款金额"></el-table-column>
        <el-table-column prop="leftMoney" label="待还款金额"></el-table-column>
        <el-table-column prop="overdue" label="有无逾期"></el-table-column>
        <el-table-column prop="status" label="订单状态"></el-table-column>
        <el-table-column v-if="checkShow" prop="id" label="查看">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dblclick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import { getTimestamp, filterTimeHMS } from "../../../assets/js/time";
import Order from "../../../assets/js/order.js";

export default {
  data() {
    return {
      searchInfo: {
        realname: "",
        mobile: "",
        applyTime: "", //下单时间
        status: "", //订单状态
        payTime: "", //放款时间
        lastRepayDay: "", //到期时间
        repayTime: "", //结清时间
        leftRepayMoneyStart: "", //待还起始金额
        leftRepayMoneyEnd: "", //待还结束金额
        overdueTag: "", //有无逾期
        page: 1,
        size: 20
      },
      checkShow: false,
      exportShow: false,
      overdueTagOptions: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "无逾期",
          value: "0"
        },
        {
          label: "逾期",
          value: 1
        }
      ],
      statusOptions: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "未放款",
          value: "1"
        },
        {
          label: "放款失败",
          value: "2"
        },
        {
          label: "待还款",
          value: "3"
        },
        {
          label: "提前结清 ",
          value: "5"
        },
        {
          label: "按时结清",
          value: "11"
        },
        {
          label: "逾期结清",
          value: "12"
        },
        {
          label: "已关闭",
          value: "6"
        },
        {
          label: "放款中",
          value: "7"
        },
        {
          label: "待审核",
          value: "8"
        },
        {
          label: "审核拒绝",
          value: "9"
        },
        {
          label: "审核关闭",
          value: "10"
        }
      ],
      borrowlistLoading: false,
      tableInfo: {
        list: [],
        size: 20,
        page: 1,
        total: 0
      }
    };
  },
  methods: {
    //改变每页显示多少条
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜素数据
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        page: that.searchInfo.page,
        size: that.searchInfo.size,
        realname: that.searchInfo.realname,
        mobile: that.searchInfo.mobile,
        applyTime: that.searchInfo.applyTime,
        status: that.searchInfo.status,
        payTime: that.searchInfo.payTime,
        repayTime: that.searchInfo.repayTime,
        lastRepayDay: that.searchInfo.lastRepayDay,
        leftRepayMoneyStart: that.searchInfo.leftRepayMoneyStart,
        leftRepayMoneyEnd: that.searchInfo.leftRepayMoneyEnd,
        overdueTag: that.searchInfo.overdueTag
      };

      let order = new Order(x);

      let reqData = order.getState();
      if (reqData.isValid != null && !reqData.isValid) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.borrowlistLoading = true;
      that.ajaxJson({
        url: "/order/list",
        data: reqData,
        success: function(data) {
          if (data.code == "0") {
            that.tableInfo = data.data;
          }
          that.borrowlistLoading = false;
        }
      });
    },
    //重置按钮
    reset() {
      let that = this;
      that.searchInfo = {
        realname: "",
        mobile: "",
        applyTime: "", //下单时间
        status: "", //订单状态
        payTime: "", //放款时间
        lastRepayDay: "", //到期时间
        repayTime: "",
        leftRepayMoneyStart: "", //待还起始金额
        leftRepayMoneyEnd: "", //待还结束金额
        overdueTag: "", //有无逾期
        page: 1,
        size: 20
      };

      that.search();
    },
    //查看订单详情
    dblclick(row) {
      let that = this;
      that.$emit("addTab", {
        tabOptions: "orderDetails_" + row.realname + "-" + row.id + "-订单详情",
        queryMsg: { method: "add", id: row.id, userId: row.userId }
      });
    },
    //导出
    exportData() {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        page: that.searchInfo.page,
        size: that.searchInfo.size,
        realname: that.searchInfo.realname,
        mobile: that.searchInfo.mobile,
        applyTime: that.searchInfo.applyTime,
        status: that.searchInfo.status,
        payTime: that.searchInfo.payTime,
        lastRepayDay: that.searchInfo.lastRepayDay,
        repayTime: that.searchInfo.repayTime,
        leftRepayMoneyStart: that.searchInfo.leftRepayMoneyStart,
        leftRepayMoneyEnd: that.searchInfo.leftRepayMoneyEnd,
        overdueTag: that.searchInfo.overdueTag
      };

      let order = new Order(x);

      let reqData = order.getState();
      if (reqData.isValid != null && !reqData.isValid) {
        that.showMsg(reqData.message, "error");
        return;
      }

      let url =
        that.host + "/order/exportList?appId=" + that.$store.state.id;
      if (reqData.realname) {
        url += "&realname=" + reqData.realname;
      }
      if (reqData.mobile) {
        url += "&mobile=" + reqData.mobile;
      }
      if (reqData.realname) {
        url += "&realname=" + reqData.realname;
      }
      if (reqData.applyStartTime) {
        url += "&applyStartTime=" + reqData.applyStartTime;
      }
      if (reqData.applyEndTime) {
        url += "&applyEndTime=" + reqData.applyEndTime;
      }
      if (reqData.status) {
        url += "&status=" + reqData.status;
      }
      if (reqData.payStartTime) {
        url += "&payStartTime=" + reqData.payStartTime;
      }
      if (reqData.payEndTime) {
        url += "&payEndTime=" + reqData.payEndTime;
      }
      if (reqData.repayStartTime) {
        url += "&repayStartTime=" + reqData.repayStartTime;
      }
      if (reqData.repayEndTime) {
        url += "&repayEndTime=" + reqData.repayEndTime;
      }
      if (reqData.lastRepayDayStart) {
        url += "&lastRepayDayStart=" + reqData.lastRepayDayStart;
      }
      if (reqData.lastRepayDayEnd) {
        url += "&lastRepayDayEnd=" + reqData.lastRepayDayEnd;
      }
      if (reqData.leftRepayMoneyStart) {
        url += "&leftRepayMoneyStart=" + reqData.leftRepayMoneyStart;
      }
      if (reqData.leftRepayMoneyEnd) {
        url += "&leftRepayMoneyEnd=" + reqData.leftRepayMoneyEnd;
      }
      if (reqData.overdueTag) {
        url += "&overdueTag=" + reqData.overdueTag;
      }
      window.open(url);
    },
    isCheckShow() {
      let that = this;
      let isCheckShow = that.urlPermissions().indexOf("/user/detail");
      if (isCheckShow == "-1") {
        that.checkShow = false;
      } else {
        that.checkShow = true;
      }
    },
    //是否显示导出
    isExportShow() {
      let that = this;
      let isExportShow = that
        .urlPermissions()
        .indexOf("/order/exportList");
      if (isExportShow == "-1") {
        that.exportShow = false;
      } else {
        that.exportShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isCheckShow(),that.isExportShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.orderList-page {
  .inputWidth {
    width: 120px;
  }
}
</style>
